<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表格删除按钮</title>
    <style>
        .red_bujige {
            background-color: red;
        }

        .container {
            display: flex;
            justify-content: space-between;
        }

        table {
            width: 60%;
            border-collapse: collapse;
            text-align: center;
        }

        table,
        th,
        td {
            border: 1px solid black;
        }

        th,
        td {
            padding: 10px;
        }

        thead th {
            background-color: #f2f2f2;
        }

        .no-data {
            color: blue;
            font-weight: bold;
            text-align: center;
        }

        .summary {
            display: flex;
            justify-content: space-around;
            font-weight: bold;
        }

        .inputs {
            width: 35%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            /* 对齐到左端 */
        }

        .input-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .input-label {
            width: 30%;
            text-align: right;
            padding-right: 10px;
        }

        .input-field {
            width: 70%;
            padding: 5px;
            box-sizing: border-box;
        }

        .inputs button {
            padding: 5px 10px;
        }

        .delete-btn {
            color: red;
            text-decoration: none;
            cursor: pointer;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div id="app" class="container">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>科目名</th>
                    <th>分数</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody v-if="courseList.length > 0">
                <tr v-for="(item,index) in courseList" :key="item.id">
                    <td>{{index + 1}}</td>
                    <td>{{item.name}}</td>
                    <td :class="{red_bujige : item.score<60}">{{item.score}}</td>
                    <td><a href="#" @click.prevent="delTask(item.id)" class="delete-btn">删除</a></td>
                </tr>

                <!-- 如果没有数据，则注释掉以上行，并取消注释下面的暂无数据行 -->
            <tbody v-else>
                <tr class="no-data">
                    <td colspan="4">暂无数据</td>
                </tr>
            </tbody>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">
                        <div class="summary">
                            <span>总分: <span id="totalScore">{{getSumScore}}</span></span>
                            <span>平均分: <span id="averageScore">{{getAvgScore}}</span></span>
                        </div>
                    </td>
                </tr>
            </tfoot>
        </table>
        <div class="inputs">
            <div class="input-group">
                <span class="input-label">科目:</span>
                <input v-model.trim="subjectName" type="text" class="input-field" placeholder="请输入科目">
            </div>
            <div class="input-group">
                <span class="input-label">分数:</span>
                <input v-model.number="subjectScore" type="text" class="input-field" placeholder="请输入分数">
            </div>
            <button @click="addNewTask()">新增任务</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        // Vue 实例 在全局环境，就有了Vue构造函数
        const app = new Vue({
            // 通过el 配置选择器
            el: '#app',
            data: {
                courseList: [
                    { id: 1, name: "语文", score: 20 },
                    { id: 2, name: "数学", score: 30 },
                    { id: 3, name: "英语", score: 80 },
                    { id: 4, name: "政治", score: 70 },

                ],
                sumScore: 100,
                avgScore: 100,
                //input框录入 科目 和 分数
                subjectName: "",
                subjectScore: "",

            },
            methods: {
                //新增科目
                addNewTask() {
                    if (!this.subjectName) {
                        alert("请输入科目要素");
                    }
                    if (typeof this.subjectScore !== 'number') {
                        alert("请输入数字格式的分数");
                    }

                    this.courseList.unshift({
                        id: +new Date(),
                        name: this.subjectName,
                        score: this.subjectScore
                    });



                },
                //删除科目信息
                delTask(id) {
                    this.courseList = this.courseList.filter(item => item.id != id);

                }
            },


            computed: {
                //总分
                getSumScore() {
                    let total = this.courseList.reduce((prev, item) => prev + item.score, 0);
                    console.log(total);
                    return total;
                },
                //平均分
                getAvgScore() {

                    if (this.courseList.length >= 0) {

                        {
                            let total = this.courseList.reduce((prev, item) => prev + item.score, 0);

                            let avgs = total / this.courseList.length;
                            return avgs;
                        }

                    }
                }



            }
        });
    </script>
</body>

</html>